<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-row>
        <!--<el-col :span="6">-->

        <!--</el-col>-->
        <el-col :span="24" style="text-align: right">
          <el-col :xl="4" :lg="5">
            <div class="el-form-item postInfo-container-item el-form-item--medium">
              <label class="el-form-item__label" style="width: 80px;">供应商:</label>
              <div class="el-form-item__content" style="margin-left: 80px;">
                <div class="el-input el-input--medium">
                  <el-select v-model="listQuery.condition.partnerId" filterable placeholder="请选择供应商">
                    <el-option v-for="partner in partnerList" :key="partner.id" :label="partner.name" :value="partner.id"></el-option>
                  </el-select>
                </div>
              </div>
            </div>
          </el-col>

          <el-col :xl="5" :lg="7">
            <div class="el-form-item postInfo-container-item el-form-item--medium">
              <label class="el-form-item__label" style="width: 120px;">单据日期开始:</label>
              <div class="el-form-item__content" style="margin-left: 120px;">
                <div class="el-input el-input--medium">
                  <el-date-picker v-model="listQuery.condition.paymentDateStart" type="date" value-format="yyyy-MM-dd" placeholder="请选择单据日期开始"></el-date-picker>
                </div>
              </div>
            </div>
          </el-col>

          <el-col :xl="5" :lg="7">
            <div class="el-form-item postInfo-container-item el-form-item--medium">
              <label class="el-form-item__label" style="width: 120px;">单据日期结束:</label>
              <div class="el-form-item__content" style="margin-left: 120px;">
                <div class="el-input el-input--medium">
                  <el-date-picker v-model="listQuery.condition.paymentDateEnd" type="date" value-format="yyyy-MM-dd" placeholder="请选择单据日期结束"></el-date-picker>
                </div>
              </div>
            </div>
          </el-col>
          <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-search" @click="searchClick">搜索</el-button>
          <!-- <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-circle-plus-outline" @click="moreClick">更多 -->
          </el-button>
          <el-dropdown trigger="click" :hide-on-click=false style="float: right;margin-left: 10px">
            <span class="el-dropdown-link">
              <el-button class="filter-item" size="small" type="primary" v-waves>
                选择列
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-checkbox-group v-model="theadCheckVal">
                  <el-checkbox label="partnerName">供应商</el-checkbox>
                  <el-checkbox label="periodBalance">期初余额</el-checkbox>
                  <el-checkbox label="ocCreditAmt">本期应付</el-checkbox>
                  <el-checkbox label="ocDebitAmt">本期付款</el-checkbox>
                  <el-checkbox label="balance">期末余额</el-checkbox>
                </el-checkbox-group>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      <div style="clean:both"></div>
    </div>
    <div :class="{'search-transition':searchFlag,h0:true,'height-auto':true,'search-content':true}">
      <el-row>

      </el-row>
    </div>
    <div style="clean:both"></div>

    <el-table ref="balanceTable" :data="balanceList" v-loading="listLoading" element-loading-text="加载中" border fit highlight-current-row style="width: 100%;margin-top:5px">
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column :key="key" align="center" v-for='(value,key) in tableThead' :label="value.title">
        <template slot-scope="scope">
          <div v-if="value.key === 'btId'">{{scope.row[value.key] | payBusinessTypeFilter}}</div>
          <div v-else>{{scope.row[value.key]}}</div>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.current" :page-sizes="[10,20,30,50]" :page-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total">
      </el-pagination>
    </div>
  </div>

</template>

<script>
import { balanceList } from '@/api/pay/streamBook'
import { getPartnerList } from '@/api/baseDataCommon'
import waves from '@/directive/waves' // 水波纹指令

const defautlTableThead = [
  { key: 'partnerName', title: '供应商' },
  { key: 'periodBalance', title: '期初余额' },
  { key: 'ocCreditAmt', title: '本期应付' },
  { key: 'ocDebitAmt', title: '本期付款' },
  { key: 'balance', title: '期末余额' }
]
export default {
  name: 'balance',
  directives: {
    waves
  },
  data() {
    return {
      theadCheckVal: [
        'partnerName',
        'periodBalance',
        'ocCreditAmt',
        'ocDebitAmt',
        'balance'
      ],
      tableThead: defautlTableThead,
      search: {},
      listQuery: {
        current: 1,
        size: 10,
        total: 0,
        condition: {}
      },
      balanceList: [],
      listLoading: false,
      searchFlag: true,
      partnerList: [] // 供应商
    }
  },
  created() {
    // 获取供应商
    getPartnerList().then(result => {
      this.$data.partnerList = result.data
    })
    // this.list()
  },
  watch: {
    theadCheckVal(valArr) {
      this.tableThead = defautlTableThead.filter(v => {
        for (var i = 0; i < valArr.length; i++) {
          if (v.key === valArr[i]) {
            return v
          }
        }
      })
    }
  },
  methods: {
    list() {
      // 处理是否展开更多
      let queryParam = {}
      if (this.$data.searchFlag) {
        queryParam = this.$data.listQuery
      } else {
        Object.assign(queryParam, this.$data.listQuery)
        queryParam.condition = {
          name: this.$data.listQuery.condition.name
        }
      }
      if (!queryParam.condition.partnerId) {
        this.$notify({
          title: '信息提示',
          message: '请选择供应商',
          type: 'error',
          duration: 2000
        })
        return
      }

      if (!queryParam.condition.paymentDateStart || !queryParam.condition.paymentDateEnd) {
        this.$notify({
          title: '信息提示',
          message: '请选择单据开始日期及单据结束日期',
          type: 'error',
          duration: 2000
        })
        return
      }
      // 列表查询
      this.$data.listLoading = true
      balanceList(queryParam).then(result => {
        if (result.code === 0) {
          this.$data.balanceList = result.data.records
          this.$data.listQuery.total = result.data.total
        } else {
          this.$notify({
            title: '信息提示',
            message: result.message,
            type: 'error',
            duration: 2000
          })
        }
        this.$data.listLoading = false
      })
    },
    handleSizeChange(val) {
      // 分页size变化
      this.$data.listQuery.size = val
      this.list()
    },
    handleCurrentChange(val) {
      // 分页当前页变化
      this.$data.listQuery.current = val
      this.list()
    },
    searchClick() {
      // 搜索
      this.list()
    }
  }
}
</script>
<style scoped>

</style>
